<template>
    <div class="main">
        <!-- 顶部导航 -->
        <div class="nav main-bgc celar-fix">
            <div class="logo">
                <img src="../assets/logo.png" alt="">
            </div>
                <el-popover
                    ref="userPassword"
                    placement="bottom"
                    width="50"
                    trigger="hover">
                    <div class="user-help">
                        <img src="../assets/密码.png" alt="">
                        <router-link to="/changePassword">修改密码</router-link>
                    </div>
                    <div class="user-exit">
                        <img src="../assets/退出登录.png" alt="">
                        <a @click="exitLogin" href="javascript:">退出登录</a>
                    </div>
                </el-popover>

            <div class="user clear-fix">
                
                <div class="user-organization">
                    <a href="http://www.1sedu.com/pc/index.html">一生教育官网</a>
                </div>
               

                <div class="user-message" v-popover:userPassword>
                    <img :src="userMessage.userUrl" alt="">
                    <span>{{userMessage.userName}}</span>
                    <i class="el-icon-caret-bottom"></i>
                </div>
            </div>
        </div>
        <!-- 侧边菜单 -->
        <div class="content clear-fix">
            <div class="sidebar">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#3d464d"
                text-color="#aaaeb0"
                :router="true"
                active-text-color="#ffffff">
                    <!-- 首页 -->
                     <router-link to="/home">
                        <el-submenu index="/home">
                            <template slot="title">
                            <img src="../assets/首页.png" alt="">
                            <span>首页</span>
                            </template>
                        </el-submenu>
                     </router-link>
                    <!-- 视频管理 -->
                    <el-submenu index="/video">
                        <template slot="title">
                        <img src="../assets/视频管理.png" alt="">
                        <span>视频管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/video_only">单一视频</el-menu-item>
                            <el-menu-item index="/video_seriec">系列视频</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <!-- 帮助中心 -->
                     <el-submenu index="/help">
                        <template slot="title">
                        <img src="../assets/帮助.png" alt="">
                        <span>帮助</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">常见问题</el-menu-item>
                            <el-menu-item index="1-2">协议说明</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <!-- 关于我们 -->
                     <el-submenu index="/regard">
                        <template slot="title">
                            <img src="../assets/关于我们.png" alt="">
                            <span>关于我们</span>
                        </template>
                    </el-submenu>
                </el-menu>
            </div>
            <div class="main-content-style">
                <div class="bread-crumb" v-show="breadRouter.home != '/home'">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-if="breadRouter.secondMenu" :to="{path:'/'+breadRouter.secondMenu}">{{utils.routerMenu(textRouter.secondMenu)}}</el-breadcrumb-item>
                        <el-breadcrumb-item v-if="breadRouter.threeMenu &&  !/^\d/.test(breadRouter.threeMenu)" :to="{path:'/'+breadRouter.secondMenu+'/'+breadRouter.threeMenu}">{{utils.routerMenu(textRouter.threeMenu)}}</el-breadcrumb-item>
                        <el-breadcrumb-item v-if="breadRouter.fourMenu && !/^\d/.test(breadRouter.fourMenu)"  :to="{path:'/'+breadRouter.secondMenu+'/'+breadRouter.threeMenu+'/'+breadRouter.fourMenu}">{{utils.routerMenu(textRouter.fourMenu)}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <router-view class="view-style">
                    
                </router-view>
            </div>
             
        </div>
        
    </div>
</template>


<script>
export default {
    data() {
        return {
            userMessage: {},
            // 路由对象
            breadRouter: {
                home: this.$route.path, //主页
                secondMenu: '', //二级目录
                threeMenu: '', //三级目录
                fourMenu: '' //四级目录
            },
            // 对应路由显示文字对象
            textRouter:{
                home: this.$route.path, //主页
                secondMenu: '', //二级目录
                threeMenu: '', //三级目录
                fourMenu: '' //四级目录
            }
        }
    },
    created() {
        // 获取用户信息
        this.utils.$get(this.utils.GET_USER_MESSAGE, res => {
            this.userMessage = res.data
        })
        this.changeRouter()
    },
    watch: {
        $route(newVal) {
            this.changeRouter()
        }
    },
    methods: {
        // 退出登录
        exitLogin() {},
        //根据路由改变导航
        changeRouter() {
            let presentPath = this.$route.path.split('/')
            this.textRouter = {
                home: this.$route.path,
                secondMenu: presentPath[1],
                threeMenu: presentPath[2],
                fourMenu: presentPath[3]
            }
            if(/^\d/.test(presentPath[2])){
                presentPath[1] = presentPath[1]+'/'+presentPath[2]
            }
            if(/^\d/.test(presentPath[3])){
                presentPath[2] = presentPath[2]+'/'+presentPath[3]
            }
            this.breadRouter = {
                home: this.$route.path,
                secondMenu: presentPath[1],
                threeMenu: presentPath[2],
                fourMenu: presentPath[3]
            }
            console.log(this.breadRouter.secondMenu,'路由导航')
        }
    }
}
</script>


<style lang="less">
.main {
    .nav {
        height: 80px;
        width: 100%;
        .logo {
            float: left;
            width: 250px;
            height: 100%;
            background-color: #3186dc;
            border: none;
            > img {
                display: block;
                margin: 20px auto;
            }
        }
        .user {
            float: right;
            margin-right: 40px;
            .user-organization {
                float: left;
                line-height: 80px;
                > a {
                    color: #fff;
                    font-size: 14px;
                }
            }

            .user-message {
                float: left;
                margin-left: 60px;
                color: #fff;
                height: 80px;
                padding-top: 20px;
                > img {
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                    vertical-align: middle;
                }
                > span {
                    display: inline-block;
                    margin-left: 10px;
                }
            }
        }
    }
    // 导航
    .content {
        min-height: 800px;
        .sidebar {
            height: 100%;
            width: 250px;
            float: left;
            .el-menu-vertical-demo {
                min-height: 800px;
                .el-submenu {
                    text-align: left;
                    .el-submenu__title {
                        > img {
                            width: 20px;
                            margin-right: 10px;
                        }
                        > span {
                            > a {
                                color: #aaaeb0;
                            }
                        }
                    }
                    &:nth-child(1) {
                        margin-top: 20px;
                        .el-submenu__icon-arrow {
                            display: none;
                        }
                    }
                    &:nth-child(4) {
                        .el-submenu__icon-arrow {
                            display: none;
                        }
                    }
                    .el-menu {
                        .el-menu-item-group__title {
                            display: none;
                        }
                        .el-menu-item-group {
                            > ul {
                                > li {
                                    padding-left: 65px !important;
                                }
                            }
                        }
                    }
                }
            }
        }
        .main-content-style {
            padding: 20px;
            background-color: #f6f6f6;
            display: block;
            margin-left: 250px;
            text-align: left;
            min-height: 800px;
            min-width: 1300px;
            .bread-crumb {
                height: 30px;
                .el-breadcrumb{
                    height: 100%;
                }
            }
            .view-style{
                background-color: #fff;
                padding: 20px;
            }
        }
    }
}

.el-popover {
    padding: 0;
    .user-help {
        padding: 10px;
        > img {
            width: 15px;
            vertical-align: middle;
        }
        > a {
            display: inline-block;
            font-size: 14px;
            color: #666;
            margin-left: 10px;
        }
        &:hover {
            background-color: #e5e5e5;
        }
    }
    .user-exit {
        padding: 10px;
        > img {
            width: 15px;
            vertical-align: middle;
        }
        > a {
            display: inline-block;
            font-size: 14px;
            color: #f93a3a;
            margin-left: 10px;
        }
        &:hover {
            background-color: #e5e5e5;
        }
    }
}
</style>

